<script lang="ts" setup>
import 'md-editor-v3/lib/style.css'
import { addCommentApi } from '@/request/api/comment'
import { useUserStore } from '@/stores/user'
import type { ResultType } from '@/type/type'
import { addToFormData, isEmpty } from '@/utils'
import { useTemporaryStore } from '@/stores/temporary'

const userStore = useUserStore()
const temporaryStore = useTemporaryStore()
// 是否是文字输入
let isTextarea = ref<boolean>(true)

const addComment = () => {
  if (!temporaryStore.upload.formData.get('files') && isEmpty(temporaryStore.comment.content)) {
    ElMessage.warning('请输入评论内容')
    return
  }
  // 去除首尾字符
  temporaryStore.comment.content = temporaryStore.comment.content?.trim()
  temporaryStore.upload.formData = addToFormData(
    temporaryStore.upload.formData,
    temporaryStore.comment
  )
  temporaryStore.upload.formData.append('userId', userStore.user.id + '')
  addCommentApi(temporaryStore.upload.formData).then((res: ResultType<boolean>) => {
    temporaryStore.initComment()
  })
}
</script>

<template>
  <el-container class="p-5 pb-3 use-third-bg use-transitions-colors" direction="vertical">
    <span class="pb-4 flex items-center">
      <SvgIcon
        message="评 论"
        name="edit"
        parent-class="!text-amber-500 !text-lg"
        svg-class="!size-5"
      />
    </span>
    <el-container class="relative h-28" direction="vertical">
      <textarea
        v-model="temporaryStore.comment.content"
        :class="
          'resize-none size-full outline-0 duration-300 absolute' +
          (isTextarea ? '' : ' -translate-x-full')
        "
        :placeholder="
          temporaryStore.commentReply.isReply
            ? '@' + temporaryStore.commentReply.parentName
            : '非礼勿言...'
        "
        maxlength="120"
      />
      <el-container
        :class="'-translate-x-full duration-300 absolute' + (isTextarea ? '' : ' translate-x-0')"
      >
        <UploadImg />
      </el-container>
    </el-container>
    <span class="flex pt-2 h-fit items-center justify-between bottom-0">
      <span class="flex items-center gap-3">
        <Emoji @get-emoji="(emoji: string) => (temporaryStore.comment.content += emoji)" />
        <a href="javascript:" @click="isTextarea = !isTextarea">
          <SvgIcon name="picture" svg-class="!size-6" />
        </a>
      </span>
      <span class="flex items-center gap-3">
        <a
          class="py-1 border px-2 use-radius-xs use-transitions-shadow-short text-amber-500 use-hover-bg text-sm hover:text-gray-50"
          href="javascript:"
          @click="temporaryStore.initComment()"
        >
          清 除
        </a>
        <a
          class="py-1 border px-2 use-radius-xs use-transitions-shadow-short text-amber-500 use-hover-bg text-sm hover:text-gray-50 duration-200"
          href="javascript:"
          @click="addComment"
        >
          发 送
        </a>
      </span>
    </span>
  </el-container>
</template>

<style lang="scss" scoped></style>
